<template>

    <div style="padding: 10px;   background-color: #52acb3; box-shadow: 0 0 3px pink; border-radius: 5px;">
        <h3>我是父元素,provice-parent</h3>
        <p>
        <div class="block">
            学校宣传处
            <input type="text" v-model="propagandaMessage" /> <button type="button" @click="publicMessage">发布</button>
            <ol>
                <li v-for="msg in allMsg">
                    已发布消息：{{ msg }}
                </li>
            </ol>
        </div>
        <div class="block">
            蓝桥杯报名处
            <ol>
                <li v-for="sign in signUpList">
                    已报名，学号 {{ sign }}
                </li>
            </ol>
        </div>
        </p>
        <div>
            <ClassRoom :class-name="'java-移动开发1班'"> </ClassRoom>

            <!-- allMsg:{{ allMsg }} -->

        </div>
    </div>



</template>

<script setup lang="ts" name='School'>
import { ref, reactive, provide } from "vue";

//vite 的特性，导入的vue 默认 不能省略扩展名
import ClassRoom from "./ClassRoom.vue";
const propagandaMessage = ref('')
const allMsg = reactive([])


const signUpList = reactive([])
function publicMessage() {

    console.log("propagandaMessage", propagandaMessage.value)
    allMsg.push(propagandaMessage.value)
    propagandaMessage.value = ''

    console.log(allMsg);

}

function appendSignUpList(name: string) {
    signUpList.push(name)
}


provide('allMsg', allMsg)
provide('appendSignUpList', appendSignUpList)

</script>

<style scoped></style>